<template>
	<view>
		<mescroll-body ref="mescrollRef" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="card-box" v-for="item in dataList" :key="item.id" @click="jumpPage(item)">
				<view class="card-box__top">
					<u--image :showLoading="true" :src="item.siteImgs[0]" width="80px" height="80px"></u--image>
					<view class="card-box__top-right">
						<view class="right-title-box">
							<view class="right-title">{{ item.siteName }}</view>
							<view class="path-text">{{ putDistance(item.distance) }}</view>
						</view>
						<view class="address-info u-line-3">{{ item.siteAddress }}</view>
						<!-- <view class="color-blue">联系电话: {{ item.sitePhone || "无" }}</view> -->
					</view>
				</view>
				<view class="card-box__bottom">
					<text class="tip-info">{{ item.siteRemark }}</text>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';

import { putDistance } from '@/static/js/putDistance.js';
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			putDistance,
			searchInfo: {},
			dataList: [], // 站点列表
			// 分页配置
			upOption: {
				textNoMore: '没有更多了',
				noMoreSize: 1,
				empty: {
					icon: require('@/static/image/empty/icon-baobiao.png'),
					tip: '暂无站点信息',
					fixed: true,
					top: '300rpx'
				},
				toTop: {
					safearea: true
				}
			},
			longitude: 0,
			latitude: 0
		};
	},
	onLoad(option) {
		const { longitude, latitude } = option;
		this.searchInfo.longitude = longitude;
		this.searchInfo.latitude = latitude;
	},
	methods: {
		// 过滤端口状态
		filterPort(info) {
			if (!info) return '无端口';
			const freeInfo = info.filter(item => item.portStatus === 0);
			return freeInfo.length + '个端口空闲';
		},
		// 跳转到站点详情页
		jumpPage(item) {
			uni.navigateTo({
				url: `/packHome/siteInfo/siteInfo?id=${item.id}`
			});
		},
		async upCallback(page) {
			this.searchInfo.page = page.num; // 页码, 默认从1开始
			this.searchInfo.limit = page.size; // 页长, 默认每页10条
			const res = await this.$api.site.peripherySiteList(this.searchInfo);
			const curPageData = res.data.list ? res.data.list : [];
			let curPageLen = curPageData.length;
			//  通过距离进行排序
			if (curPageData.length) {
				curPageData.sort((a, b) => {
					return a.distance - b.distance;
				});
			}
			//设置列表数据
			if (this.searchInfo.page == 1) this.dataList = []; //如果是第一页需手动置空列表
			this.dataList.push(...curPageData); //追加新数据
			//后台接口有返回列表的总页数 totalPage
			this.mescroll.endBySize(curPageLen, res.data.countNum);
		}
	}
};
</script>

<style lang="scss">
.card-box {
	margin: 30rpx;
	background: #fff;
	padding: 30rpx;
	font-size: 24rpx;
	&__top {
		display: flex;
		border-bottom: 1px #e4e4e4 solid;
	}
	&__top-right {
		margin-left: 20rpx;
		margin-bottom: 20rpx;
		padding-bottom: 30rpx;
		width: 100%;
		.right-title-box {
			display: flex;
			justify-content: space-between;
			.right-title {
				font-weight: bold;
				font-size: 28rpx;
			}
			.path-text {
				font-size: 22rpx;
				color: #f9ae3d;
				text-align: right;
			}
		}
		.address-info {
			font-size: 22rpx;
			padding-top: 10rpx;
			color: #999;
			margin: 8rpx 0;
			height: 60rpx;
		}
	}
	&__bottom {
		margin-top: 22rpx;
		font-size: 24rpx;
		.tip-info {
			margin-left: 10rpx;
			color: #999;
		}
	}
}
</style>
